<template>
    <a-modal :keyboard="false" :maskClosable="false" title="客户档案" :open="visible" :width="1200" :confirmLoading="loading" centered @cancel="handleCancel" :footer="false">
        <a-space>
            <a-image :src="modelRef.avatar" :width="100" v-if="modelRef.avatar"></a-image>
            <a-descriptions title="" :column="3">
                <a-descriptions-item label="认证姓名">{{ modelRef.certifierNames || '' }}</a-descriptions-item>
                <!-- <a-descriptions-item label="认证状态">{{ statusMap[modelRef.certifierNames] || '' }}</a-descriptions-item> -->
                <a-descriptions-item label="备注名">{{ modelRef.remark || '' }}</a-descriptions-item>
                <a-descriptions-item label="昵称">{{ modelRef.name || '' }}</a-descriptions-item>
                <a-descriptions-item label="认证时间">{{ modelRef.createTime || '' }}</a-descriptions-item>
                <a-descriptions-item label="证件号码">{{ modelRef.idNumber || '' }}</a-descriptions-item>
                <a-descriptions-item label="联系方式">{{ modelRef.mobile || '' }}</a-descriptions-item>
            </a-descriptions>
        </a-space>
        <a-tabs v-model:activeKey="activeKey" @change="handleTabActiveChange">
            <a-tab-pane key="1" tab="资产信息"></a-tab-pane>
            <a-tab-pane key="2" tab="缴费记录"></a-tab-pane>
        </a-tabs>

        <a-table :data-source="modelRef.propertyList" :columns="columns" :pagination="false" v-if="activeKey === '1'"></a-table>
    </a-modal>
</template>

<script lang="ts" setup>
    import { reactive, ref, watchEffect, watch } from 'vue';
    import { cloneDeep } from 'lodash-es';
    import { getClientPropertyRenterRelationDetail, getClientManagementDetail } from '@/api/smss/client';
    import { typeMap, bindMap } from '../assets/common';
    import type { TableColumn } from '@/typing';

    const visible = ref<boolean>(false);

    const emit = defineEmits(['cancel', 'success']);
    const activeKey = ref<string>('1');
    const loading = ref(false);
    const defaultForm = {};
    const modelRef = reactive<any>(cloneDeep(defaultForm));

    const columns: TableColumn[] = [
        {
            title: '资产位置',
            customRender: ({ record }) => [record.projectName, record.building, record.floor, record.unit, record.room].filter(Boolean).join('/'),
        },
        {
            title: '资产类型',
            customRender: ({ record }) => {
                return typeMap[record.type];
            },
        },
        {
            title: '建筑/车位面积',
            dataIndex: 'billableArea',
        },
        // {
        //     title: '绑定状态',
        //     customRender: ({ record }) => {
        //         return bindMap[record.bindWay];
        //     },
        // },
        {
            title: '绑定时间',
            dataIndex: 'bindTime',
        },
        {
            title: '绑定人',
            dataIndex: 'creatorName',
        },
    ];
    const handleTabActiveChange = () => {};

    const handleCancel = () => {
        emit('cancel');
        activeKey.value = '1';
        visible.value = false;
        Object.keys(modelRef).forEach(key => {
            delete modelRef[key];
        });
        Object.assign(modelRef, cloneDeep(defaultForm));
    };

    const init = async data => {
        console.log(data);
        const resInfo = await getClientPropertyRenterRelationDetail(data.externalUserid);
        const detailInfo = await getClientManagementDetail(data.externalUserid);
        Object.assign(modelRef, detailInfo.data, resInfo.data);
        visible.value = true;
    };

    defineExpose({
        init,
    });
</script>
